<template>
  <div>
    <div
      :style="isMobile ? 'width:100%' : 'width:375px'"
      class="p-10px bg-white fixed bottom-0px"
    >
      <div class="justify-between items-center flex">
        <div
          class="h-38px flex justify-center items-center bg-[#F8F8F8] text-14px text-[#999999]"
        >
          <van-button
            type="primary"
            @click="back()"
            class="w-124px"
            :disabled="backDisabled"
            >上一页</van-button
          >
        </div>
        <div>{{ current_page }} / {{ last_page }}</div>
        <div class="h-38px flex justify-center items-center text-14px">
          <van-button
            type="primary"
            class="w-124px"
            @click="next()"
            :disabled="nextDisabled"
            >下一页</van-button
          >
        </div>
      </div>
      <div class="mt-10px text-[14px] w-full text-center">
        当前页：{{ current_page }}，数据总量：
        <span class="text-[#F13535]">{{ total }}</span> 条，每页数据：{{
          per_page
        }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { useUserStore } from "@/store/index";
import { computed } from "vue";
const props = defineProps({
  current_page: {}, //当前页数
  last_page: {}, //总页数
  per_page: {}, //每页条数
  total: {}, //总条数
});
const backDisabled = computed(() => {
  if (props.current_page <= 1) {
    return true;
  } else {
    return false;
  }
});
const nextDisabled = computed(() => {
  if (props.current_page >= props.last_page) {
    return true;
  } else {
    return false;
  }
});
const store = useUserStore();
const isMobile = ref(store.isMobile);
const emits = defineEmits(["back", "next"]);
const back = () => {
  emits("back");
};
const next = () => {
  emits("next");
};
</script>
